<template>
<div class="study-container">
  <var-loading :loading="loading">
    <div class="content">
      <div class="top">
        <div style="padding-top: 20px">
          <var-chip color="#009688">
            <template #left>
              <var-icon name="star" />
            </template>
            <span style="color: white">单词词库: </span>
            <span style="font-size: 20px;font-weight: 600;color: white">{{wordCount}}</span>
          </var-chip>
        </div>
        <div style="padding-top: 20px">
          <var-chip type="primary">
            <template #left>
            <var-icon name="check" />
            </template>
            <span style="color: white">今日学习: </span>
            <span style="font-size: 20px;font-weight: 600;color: white">{{todayCount}}</span>
          </var-chip>
        </div>
      </div>
      <div class="card1">
        <div style="margin-left: 10%;padding-top: 10%;width: 80%">
          <div style="width: 100%;height: 30px">
            <div style="float: left">当前进度</div>
            <div style="float: right">{{allCount}}/{{wordCount}}词</div>
          </div>
          <var-progress label :value="rad"/>
          <var-button
              @click="gotoLearning"
              block
              style="background-color:rgb(40,183,160);margin-top: 10%;border-radius: 15px">
            <span style="color: white;font-size: 15px">开始学习</span>
          </var-button>
        </div>
          <var-button type="primary" style="width: 80%;border-radius: 15px;margin-top: 15px;margin-left: 10%;height: 40px;"  @click="bottom = true">
            <span style="color: white;font-size: 15px">学习设置</span>
          </var-button>
      </div>

      <img src="../../assets/static/AI检测.png" alt="" style="width: 100%;height: 200px">
    </div>
    <var-popup position="bottom" v-model:show="bottom" style="border-radius: 10px 10px 0 0">
      <div style="height: 280px;width: 100%">
        <div style="height: 100%;width: 95%;padding-left: 5%;padding-top: 10px">
          学习设置
          <var-divider />
          <div style="width: 100%;height: 30px;line-height: 30px;">
            <div style="float: left;color: #151515;font-size: 18px;font-weight: 600">学习模式</div>
            <div style="float: right">
              <var-radio-group
                  v-model="studyMode">
                <var-radio :checked-value="1">再认</var-radio>
                <var-radio :checked-value="2">默写+拼写</var-radio>
              </var-radio-group>
            </div>
          </div>
          <var-divider />
          <div style="width: 100%;height: 30px;line-height: 30px;">
            <div style="float: left;color: #151515;font-size: 18px;font-weight: 600">单词自动发音</div>
            <div style="float: right">
              <var-switch
                  v-model="autoRead"
              />
            </div>
          </div>
          <var-divider />
          <div style="width: 100%;height: 30px;line-height: 30px;">
            <div style="float: left;color: #151515;font-size: 18px;font-weight: 600">单词字体大小</div>
            <div style="float: right">
              <var-radio-group
                  v-model="fontSize">
                <var-radio :checked-value="1">大字</var-radio>
                <var-radio :checked-value="2">标准</var-radio>
              </var-radio-group>
            </div>
          </div>
          <var-divider />
          <div style="width: 100%;height: 60px;line-height: 30px;">
            <div style="float: left;color: #151515;font-size: 18px;font-weight: 600;line-height: 55px;">每次背诵的个数</div>
            <div style="float: right">
              <var-input v-model="value" style="width: 30px"/>
            </div>
          </div>
          <var-divider />
        </div>
      </div>
    </var-popup>
  </var-loading>
</div>
</template>

<script lang="ts" setup>
import {onMounted, ref, watch} from "vue";
import {getCount} from "@/api/wordAPI";
import {getAllStudyWordCount, getTodayStudyWordCount} from "@/api/studyAPI";
import router from "@/router";
import store from "@/store";
import {Dialog} from "@varlet/ui";

const wordCount = ref(0)
const todayCount = ref(0)
const rad = ref(0.0)
const allCount = ref(0)
const loading = ref(true);
const bottom = ref(false)
const autoRead = ref(true)
const studyMode = ref(1);
const fontSize = ref(1)
const value = ref()
const isLogin = ref(false)    //判断是否登录

watch(value , (n,o) => {
  store.state.wordLimit = n;
})

const gotoLearning = () => {
  if (isLogin.value) {
    router.push('/learning')
  } else {
    Dialog('当前未登录，登陆后才可以学习')
  }

}

onMounted(() => {

  value.value = store.state.wordLimit;

  isLogin.value = store.state.userModel != null;

  if (isLogin.value) {
    getCount()
        .then((res) => {
          wordCount.value = res.data;
        })
        .finally(() => {
          getAllStudyWordCount()
              .then((resp) => {
                allCount.value = resp.data;
                rad.value = ( resp.data / wordCount.value ) * 100;
              })
              .finally(() => {
                loading.value = false;
              })
        })
    getTodayStudyWordCount()
        .then((res) => {
          todayCount.value = res.data;
        })
  } else {
    getCount()
        .then((res) => {
          wordCount.value = res.data;
        })
        .finally(() => {
          loading.value = false;
        })
  }

})

</script>

<style scoped>
span{
  color: black;
}
.study-container{
  width: 100%;
  height: 100%;
}
.content{
  width: 90%;
  margin-left: 5%;
  height: 100%;
}
.top{
  height: 150px;
  width: 100%;
}
.card1{
  width: 100%;
  height: 250px;
  background-color: rgb(233,248,245);
  border-radius: 15px;
}

</style>